import React, {Component} from 'react'
import {Link, withRouter} from 'react-router-dom'
import {Menu, Icon} from 'antd'


import menuList from '../../config/menuConfig'
import memoryUtils from "../../utils/memoryUtils";

import logo from '../../assets/images/logo.png'
import './index.less'


const SubMenu=Menu.SubMenu;
const {Item}=Menu


/*导航权限控制*/








/*
左侧导航组件
*/



class LeftNav extends Component{
    /*
判断当前用户是否有看到当前 item 对应菜单项的权限
*/

    hasAuth=(item)=>{
        const key = item.key
        const menuSet = this.menuSet
        /*
        1. 如果当前用户是admin
        2. 如果当前item是公开的
        3. 当前用户有此item的权限: key有没有menus中
         */
        if(item.isPublic || memoryUtils.user.username==='admin' || menuSet.has(key)){
            return true
        }else if(item.children){
            return !!item.children.find(child => menuSet.has(child.key))
        }
    }
    /*
    返回包含 n 个 <Item> 和 <SubMenu> 的数组
    */




    /*
        根据指定菜单数据列表产生 <Menu> 的子节点数组
        使用 reduce() + 递归
        */

    getMenuNodes=(list)=>{
        // 得到当前请求的 path
        const path=this.props.location.pathname;
        return list.reduce((pre,item)=>{
            if(this.hasAuth(item)){
                if(!item.children){
                    pre.push((
                        <Item  key={item.key}>
                            <Link to={item.key}/>
                            <Icon type={item.icon} />
                            <span>{item.title}</span>
                        </Item>
                    ))
                }else {
                    pre.push((
                        <SubMenu
                            key={item.key}
                            title={
                                <span>
                                <Icon type={item.icon}/>
                                <span>{item.title}</span>
                            </span>
                            }
                        >
                            {this.getMenuNodes(item.children)}
                        </SubMenu>
                    ));
                    // 如果当前请求路由与当前菜单的某个子菜单的 key 匹配 , 将菜单的 key 保存为 openKey
                    if(item.children.find(cItem=>path.indexOf(cItem.key)===0)){
                        this.openKey = item.key
                    }
                }
            }
            return pre
        },[])
    };



    getMenuNodes2=(menuList)=>{
        // 得到当前请求的 path
        const path=this.props.location.pathname;
        return menuList.map((item)=>{
            if(!item.children){
                return(
                    <Item  key={item.key} >
                        <Link to={item.key} >
                            <Icon type={item.icon} />
                            <span>{item.title}</span>
                        </Link>
                    </Item>
                )
            }else {
                // 如果当前请求路由与当前菜单的某个子菜单的 key 匹配 , 将菜单的 key 保存为 openKey
                if(item.children.find(cItem => path.indexOf(cItem.key)===0)){
                    this.openKey = item.key
                }
                return (
                    <SubMenu
                        key={item.key}
                        title={
                            <span>
                                <Icon type={item.icon}/>
                                <span >{item.title}</span>
                            </span>
                        }
                    >
                        {this.getMenuNodes(item.children)}
                    </SubMenu>
                )
            }
        })
    };

    /*
    在第一次 render() 之前执行一次
    一般可以在此同步为第一次 render() 准备数据
    */
    componentWillMount() {
        this.menuSet = new Set(memoryUtils.user.role.menus || [])
        this.menuNodes = this.getMenuNodes(menuList)
    }

    render() {
        // 得到当前请求路径 , 作为选中菜单项的 key
        const selectKey = this.props.location.pathname;
        const openKey = this.openKey

        return (
            <div  className="left-nav">
                <div className='logo-link'>
                    <Link to='/home' title={'硅谷后台'} className='logo-link'>
                        <img src={logo} alt="logo"/>
                        <h1>后台</h1>
                    </Link>
                </div>

                <Menu
                    defaultOpenKeys={[openKey]}
                    mode="inline"
                    theme="dark"
                    selectedKeys={[selectKey]}
                >
                    {this.menuNodes}
                </Menu>
            </div>
        )
    }
}
/*
withRouter: 高阶组件 : 包装非路由组件返回一个包装后的新组件 , 新组件会向被包装组件传递
history/location/match 属性
*/
export default withRouter(LeftNav)